<template>
    <div id="mainTop">
        <div
        class="float-left"
        min-height="875"
        >
            <v-navigation-drawer
                v-model="drawer"
                height="875"
                width="300"
            >
                <v-row dense height="30px">
                    <v-col cols="8"><h3 style="margin-top: 10px;margin-bottom: 10px;margin-left:10px">测试场景目录列表：</h3></v-col>
                    <v-col cols="4">
                        <div style="margin-top: 10px">
                            <v-btn small text color="green" @click="newBuld({'name': ''})">添加一级节点</v-btn>
                        </div>
                    </v-col>
                </v-row>
                <v-divider></v-divider>
                <template>
                    <v-treeview
                        v-model="tree"
                        :open="initiallyOpen"
                        :items="items"
                        activatable
                        item-key="name"
                    >
                        <template v-slot:prepend="{ item, open }">
                            <v-icon>
                                {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
                            </v-icon>
                        </template>
                        <template 
                            v-slot:label="{item}"
                        >
                            <span 
                            v-text="item.name" 
                            @click="view(item)" 
                            @contextmenu.prevent="newBuld(item)"
                            width="100%"
                            >
                            </span>
                        </template>
                    </v-treeview>
                    <!-- 弹框：新增文件或文件夹的名词 -->
                    <div class="text-center">
                        <v-dialog
                            v-model="dialog"
                            max-width="500"
                        >
                            <v-card>
                            <v-card-title class="text-h6 grey lighten-2">
                                输入新增节点名称
                            </v-card-title>

                            <div style="margin-left:50px;margin-right:50px">
                                <v-row
                                align="center"
                                >
                                <v-col
                                    cols="12"
                                    sm="8"
                                >
                                    <v-text-field
                                    v-model="fileName"
                                    :counter="20"
                                    :rules="rules"
                                    label="名称"
                                    ></v-text-field>
                                </v-col>
                                </v-row>
                            </div>

                            <v-divider></v-divider>

                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn
                                color="primary"
                                text
                                @click="dialog = false"
                                >
                                取消
                                </v-btn>
                                <v-btn 
                                color="primary" 
                                @click="subitName"
                                >
                                新建
                                </v-btn>
                            </v-card-actions>
                            </v-card>
                        </v-dialog>
                    </div>
                </template>
            </v-navigation-drawer>
        </div>
        <div>
            <v-main>
                <router-view
                    :key="$route.fullPath"
                    @changeTaskID="changeTaskID($event)"
                >
                </router-view>
            </v-main>
        </div>
    </div>
</template>

<script>
import {defineComponent} from '@vue/composition-api'


export default defineComponent({
    setup() {

    },
    data(){
        return {
            sid: 0,
            sidItem: [
                { text: "场景设计", router: "Design" },
                { text: "场景列表", router: "ScenseList" },
            ],
            dialog: false,
            initiallyOpen: ['common', 'ljk'],
            tree: [],
            items: [],
            fileType: 'dir',
            fileName: '',
            cur_node_name: null,
            rules: [
                value => !!value || 'Required.',
                value => (value || '').length <= 20 || 'Max 20 characters',
            ]
        }
    },
    mounted(){
        this.$emit("changeTaskID", 4)
        this.getList()
    },
    methods: {
        change_tab(item) {
            this.$router.push({ name: item.router });
        },
        changeTaskID(e){
            console.log(e)
            this.taskId = e
        },
        getList: function (){
            this.$api.scene.getList().then(res=>{
                console.log(res)
                this.items = res.data.data
              })
        },
        view: function(node){
            console.log("view ....")
            console.log(node.name)
            this.$router.push({ name: 'SceneList', params:{name: node.name} });
        },
        newBuld: function(node){
            console.log("newBuld ....")
            if(node.file){
                console.log('file node, no dialog')
            }else {
                this.dialog = true
                this.fileName = ""
                this.cur_node_name = node.name
            }
        },
        subitName: function (){
            console.log('subitName .... ')
            let get_data = {'node': this.cur_node_name, 'name': this.fileName}
            this.$api.scene.addNode(get_data).then(res=>{
                console.log(res)
                if(res.data.success===0){
                        alert(res.data.message)
                }else {
                        this.getList()
                }
                this.dialog = false
            })
        }
    },
})
</script>

<style scoped>
#mainTop {
    margin-left: 1%;
    margin-right: 1%;
}
</style>